<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shade{
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background-color: dimgrey;
            opacity: 0.5;
            z-index: 1;
        }
        .add_model,.edit_model{
            position: fixed;
            height: 300px;
            width: 400px;
            top: 100px;
            left: 50%;
            background-color: white;
            z-index: 2;
            margin-left: -200px;
        }

        .hide{
            display: none;
        }

        .group{
            width: 400px;
            height: 20px;
            padding: 10px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<h1>主机列表(对象)</h1>
<div>
    <input id="add_host" type="button" value="添加">
</div>
    <table border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>主机名</th>
                <th>IP</th>
                <th>端口</th>
                <th>业务线</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="color: dimgrey">
            {% for row in h1 %}
                <tr host_id="{{ row.nid }}" b_id="{{ row.b_id }}">
                    <td>{{ forloop.counter }}</td>
                    <td name="hostname">{{ row.hostname }}</td>
                    <td name="ip">{{ row.ip }}</td>
                    <td name="port">{{ row.port}}</td>
                    <td>{{ row.b.caption }}</td>
                    <td>
                        <a class="edit">编辑</a> | <a class="del">删除</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

<h1>主机列表(字典)</h1>
    <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>业务线</th>
            </tr>
        </thead>
        <tbody style="color: dimgrey">
            {% for row in h2 %}
                <tr host_id="{{ row.nid }}" b_id="{{ row.b_id }}">
                    <th>{{ row.hostname }}</th>
                    <th>{{ row.b__caption }}</th>
                    </tr>
            {% endfor %}
        </tbody>
    </table>
<h1>主机列表(元组)</h1>
    <table border="1">
        <thead>
            <tr>
                <th>主机名</th>
                <th>业务线</th>
            </tr>
        </thead>
        <tbody style="color: dimgrey">
            {% for row in h3 %}
                <tr host_id="{{ row.0 }}" b_id="{{ row.2 }}">
                    <th>{{ row.1 }}</th>
                    <th>{{ row.3 }}</th>
                    </tr>
            {% endfor %}
        </tbody>
    </table>

<div class="shade hide"></div>
<div class="add_model hide">
    <form action="/host" method="post">
        <div class="group">
            <input type="text" placeholder="主机名" name="hostname">
        </div>
        <div class="group">
            <input type="text" placeholder="IP" name="ip">
        </div>
        <div class="group">
            <input type="text" placeholder="端口" name="port">
        </div>
        <div class="group">
            <select name="b_id">
                {% for op in b_list %}
                <option value="{{ op.id }}">{{ op.caption }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="tb1" style="float: left;padding-left: 10px;margin-top: 100px">
            <input type="submit" value="提交">
        </div>
        <div class="tb2" style="float: left;padding-left: 30px;margin-top: 100px">
            <input type="button" value="取消">
        </div>
    </form>
</div>
<div class="edit_model hide">
    <form id="edit_from" action="/host" method="post">
        <input type="text" name="hid">
        <input type="text"  name="hostname">
        <input type="text"  name="ip">
        <input type="text"  name="port">
        <select name="b_id">
            {% for op in b_list %}
            <option value="{{ op.id }}">{{ op.caption }}</option>
            {% endfor %}
        </select>
        <div class="tb1" style="float: left;padding-left: 10px;margin-top: 100px">
            <input type="submit" value="提交">
        </div>
        <div class="tb2" style="float: left;padding-left: 30px;margin-top: 100px">
            <input type="button" value="取消">
        </div>
    </form>
</div>
<script src="/static/jquery-1.12.4.js"></script>
<script>
    $(function () {
        $('#add_host').click(function () {
            $('.shade,.add_model').removeClass('hide')
        });

        $('.tb2').click(function () {
        $('.shade,.add_model,.edit_model').addClass('hide')
        });

        $('.edit').click(function () {
            $('.shade,.edit_model').removeClass('hide');

            var bid=$(this).parent().parent().attr('b_id');
            var hid=$(this).parent().parent().attr('host_id');

            $('#edit_from').find('select').val(bid);
            $('#edit_from').find('input[name="hid"]').val(hid);

            $(this).parent().siblings().each(function () {
                if ($(this).attr('name')=="hostname"){
                    console.log($(this).text());
                    var old_hostname=$(this).text();
                    $('#edit_from').find('input[name="hostname"]').val(old_hostname);
                }
                else if ($(this).attr('name')=="ip"){
                    var old_ip=$(this).text();
                    $('#edit_from').find('input[name="ip"]').val(old_ip);
                }
                else if ($(this).attr('name')=="port"){
                    var old_port=$(this).text();
                    $('#edit_from').find('input[name="port"]').val(old_port);
                }
            })

        });

        $('.del').click(function () {
            var hid=$(this).parent().parent().attr('host_id');
            console.log(hid)
        })
    });


</script>
</body>
</html>